<!--
 * @Description:
 * @Date: 2023-10-14 07:11:27
 * @FilePath: \hksj-vued:\03code\demo\hszl\src\components\CooperateDialog.vue
-->
<template>
  <el-dialog
      class="box-container"
      v-model="state.visible"
      :show-close="false"
      :width="state.isMobile ? '80%' : '25%'"
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <div class="title-box">
          <div :id="titleId" :class="titleClass" class="main-title">正在建设中......</div>
          <div class="sub-title">我们将竭诚为您服务</div>
        </div>
        <div class="close-btn" @click="state.visible = false">
          <el-icon><Close /></el-icon>
        </div>
      </div>
    </template>

    <div class="content">
      <!-- <div class="title">客服电话</div>
      <div class="phone">188 8888 8888</div> -->
      <div class="img"></div>
<!--      <div class="desc">扫一扫添加官方微信</div>-->
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="ConstructDialog">
import { useWindowSize } from '@vueuse/core'
import { reactive, watch } from 'vue'
const { width } = useWindowSize()

const state = reactive({
  visible: false,
  isMobile: false
})

watch(
    () => width.value,
    (val) => {
      if (val < 1024) {
        state.isMobile = true
      } else {
        state.isMobile = false
      }
    },
    { immediate: true }
)

// 打开弹窗
const openDialog = () => {
  state.visible = true
}

defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
.box-container {
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 1.5rem;

    .main-title {
      font-size: 1.6rem;
      font-weight: 500;
    }
    .sub-title {
      margin-top: 0.8rem;
      font-size: 1rem;
      color: #a1a1a1;
    }
    .close-btn {
      cursor: pointer;
      font-size: 2rem;
      color: #918e8e;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //padding: 1rem 1.5rem 2rem 1.5rem;
    .title,
    .desc {
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
    }
    .phone {
      font-size: 2rem;
      color: #d02926;
    }
    .img {
      margin: 1rem 0;
      width: 10rem;
      height: 10rem;
      background: url('../assets/images/construct.jpg') no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}
</style>
